<template>
  <div class="kjk">
    <a-typography-title :level="4" class="header">
      <img
        src="@/assets/left-s-line.png"
        class="left-s-line"
        @click="handleAvatarClick"
      />
      权益使用明细
    </a-typography-title>
    <div class="section_4">
      <span class="text_5 text_8">时间</span>
      <div class="text_6 text_8">权益名称</div>
      <span class="text_7 text_8">状态</span>
    </div>
    <div class="content">
      <div v-for="(group, index) in groupedData" :key="index">
        <div class="section_3 flex-col">
          <div class="text-wrapper_1">
            <span class="text_3">{{ group.year }}</span>
            <span class="text_4">年</span>
            <span class="text_5">{{ group.month }}</span>
            <span class="text_6">月</span>
          </div>
        </div>
        <div
          v-for="(item, subIndex) in group.children"
          :key="subIndex"
          class="section_4"
        >
          <span class="text_5 text_8">{{ item.createTime }}</span>
          <div class="text_6 text_8">
            {{ item.raiName }}
          </div>
          <span class="text_7 text_8">{{
            item.status == 0 ? '已领取' : ''
          }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { membeLListById } from '@/api/api'
import { useRouter, useRoute } from 'vue-router'
const route = useRoute()
const router = useRouter()
const dataList = ref([])
// 新增分组函数
const groupByMonth = (data) => {
  const grouped = {}
  data.forEach((item) => {
    const date = new Date(item.createTime)
    const year = date.getFullYear()
    const month = date.getMonth() + 1
    const key = `${year}-${month.toString().padStart(2, '0')}`

    if (!grouped[key]) {
      grouped[key] = {
        year,
        month,
        children: [],
      }
    }
    grouped[key].children.push(item)
  })
  return Object.values(grouped).sort((a, b) => {
    const dateA = new Date(`${a.year}-${a.month}`)
    const dateB = new Date(`${b.year}-${b.month}`)
    return dateB - dateA
  })
}

const groupedData = computed(() => groupByMonth(dataList.value))
onBeforeMount(() => {
  const userInfo = JSON.parse(localStorage.getItem('userInfo'))
  let p = {
    raiId: route.query.id,
    memberId: userInfo.id,
  }
  membeLListById(p).then((res) => {
    if (res.code == 200) {
      dataList.value = res.rows
    }
  })
})
const handleAvatarClick = () => {
  router.push({ path: '/vip' })
}
</script>

<style scoped lang='less'>
.kjk {
  .header {
    text-align: center;
    margin: 0;
    padding: 10px;
    border-bottom: 1px solid #ccc;
    height: 60px;
    .left-s-line {
      width: 20px;
      position: absolute;
      left: 16px;
      top: 16px;
    }
  }
  .content {
    width: 100%;
    height: calc(100vh - 135px);
    overflow-y: auto;
    .section_3 {
      background-color: rgba(252, 250, 244, 1);
      padding: 16px 278px 16px 24px;
      .text-wrapper_1 {
        width: 88px;
        height: 25px;
        overflow-wrap: break-word;
        font-size: 0;
        font-family: Roboto-Medium;
        font-weight: 500;
        text-align: left;
        white-space: nowrap;
        line-height: 21px;
        .text_3 {
          height: 25px;
          overflow-wrap: break-word;
          color: rgba(0, 0, 0, 0.85);
          font-size: 18px;
          font-family: Roboto-Medium;
          font-weight: 500;
          text-align: left;
          white-space: nowrap;
          line-height: 21px;
        }
        .text_4 {
          height: 25px;
          overflow-wrap: break-word;
          color: rgba(0, 0, 0, 0.85);
          font-size: 18px;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          text-align: left;
          white-space: nowrap;
          line-height: 21px;
        }
        .text_5 {
          height: 25px;
          overflow-wrap: break-word;
          color: rgba(0, 0, 0, 0.85);
          font-size: 18px;
          font-family: Roboto-Medium;
          font-weight: 500;
          text-align: left;
          white-space: nowrap;
          line-height: 21px;
        }
        .text_6 {
          height: 25px;
          overflow-wrap: break-word;
          color: rgba(0, 0, 0, 0.85);
          font-size: 18px;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          text-align: left;
          white-space: nowrap;
          line-height: 21px;
        }
      }
    }
  }
  .section_4 {
    width: 100%;
    align-self: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 24px;
    border-bottom: 1px solid rgba(240, 240, 240, 1);
    overflow: hidden;
    .text_8 {
      color: rgba(0, 0, 0, 0.85);
      font-size: 16px;
      line-height: 22px;
    }
    .text_5 {
      width: 30%;
    }
    .text_6 {
      width: 50%;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      word-break: break-all;
      text-align: center;
    }
    .text_7 {
      width: 15%;
    }
  }
}
</style>